<template>
  <div class="srceen-header">
    <div class="header-title">{{ title }}</div>
    <div class="header-time">
      <span>{{ date }}</span>
      <span style="margin-left: 18px">{{ time }}</span>
      <div
        v-if="full"
        :title="fullSrceen ? '退出全屏' : '全屏'"
        class="full"
        @click="handleFull"
      >
        {{ fullSrceen ? "退出" : "全屏" }}
      </div>
      <el-dropdown v-if="infoShow" @command="handleCommand">
        <span class="info">
          {{ userInfo?.nickname }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: "Page-title",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 是否显示用户信息
    infoShow: {
      type: Boolean,
      default: true,
    },
    // 显示全屏
    full: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      date: "", // 日期
      time: "", // 时间
      timer: null, // 时间定时器
      fullSrceen: false, // 是否全屏
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userinfo")) || { nickname: "" };
    },
  },
  mounted() {
    this.getDate();
    this.getTime();
    this.timer = setInterval(() => {
      this.getDate();
      this.getTime();
    }, 1000);
    document.addEventListener("fullscreenchange", this.handleFullScreenChange);
    document.addEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    // 获取日期
    getDate() {
      const time = new Date();
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      if (m < 10) m = "0" + m;
      let d = time.getDate();
      if (d < 10) d = "0" + d;
      this.date = `${y}.${m}.${d}`;
    },
    // 获取时间
    getTime() {
      const time = new Date();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      if (h < 10) h = "0" + h;
      if (m < 10) m = "0" + m;
      if (s < 10) s = "0" + s;
      this.time = `${h}:${m}:${s}`;
    },
    // 全屏 / 退出全屏
    handleFull() {
      if (this.fullSrceen) {
        this.fullSrceen = false;
        if (document.fullscreenElement) {
          document.exitFullscreen();
        } else if (document.webkitFullscreenElement) {
          document.webkitExitFullscreen();
        } else if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
        } else if (document.msFullscreenElement) {
          document.msExitFullscreen();
        }
      } else {
        this.fullSrceen = true;
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
      }
    },
    // 监听全屏状态变化
    handleFullScreenChange() {
      let full =
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement;
      this.fullSrceen = !!full;
    },
    // 监听键盘全屏
    handleKeyDown(e) {
      if (e.key === "F11") {
        e.preventDefault();
        this.handleFull();
      } else if (e.key === "Escape") {
        let full =
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement;
        if (full) {
          this.handleFull();
        }
      }
    },
    // 按钮操作
    handleCommand(command) {
      if (command === "logout") {
        this.$confirm("确认退出登录吗?", "退出登录", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            this.$message.success("退出成功");
            setTimeout(() => {
              if (this.fullSrceen) this.handleFull();
              this.$router.push("/login");
            }, 2000);
          })
          .catch(() => {});
      }
    },
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    document.removeEventListener("fullscreenchange", this.handleFullScreenChange);
    document.removeEventListener("keydown", this.handleKeyDown);
  },
};
</script>
<style lang="scss" scoped>
.srceen-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 106px;
  background: url("~@/assets/srceen-title-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  .header-title {
    font-family: SHUHETI-bold;
    font-weight: bold;
    font-size: 42px;
    color: #ffffff;
    letter-spacing: 12px;
    line-height: 71px;
  }
  .header-time {
    position: absolute;
    right: 12px;
    top: 14px;
    letter-spacing: 3px;
    font-family: FontquanXinYiGuanHeiTi;
    font-size: 13px;
    color: #ffffff;
    .full {
      display: inline-block;
      min-width: 67px;
      height: 28px;
      line-height: 20px;
      vertical-align: top;
      background: url("~@/assets/srceen-full.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      margin-left: 60px;
      &:hover {
        cursor: pointer;
        opacity: 0.9;
      }
    }
    .info {
      display: inline-block;
      height: 28px;
      line-height: 24px;
      vertical-align: top;
      background: url("~@/assets/count-bg.png") no-repeat;
      background-size: 100% 100%;
      padding: 0 12px;
      color: #ffffff;
      &:hover {
        cursor: pointer;
        opacity: 0.9;
      }
    }
  }
}
</style>
<style>
.el-dropdown-menu {
  background-color: rgba(1, 18, 81, 0.4) !important;
  backdrop-filter: blur(3px);
  border: 1px solid #fff;
  padding: 2px 0;
  .el-dropdown-menu__item {
    color: #ffffff;
    &:hover {
      background: rgba(1, 18, 81, 0.7);
    }
  }
}
.el-popper .popper__arrow::after {
  border-bottom-color: #011251 !important;
}
</style>
